<%-- 
    Document   : invalid
    Created on : Dec 3, 2013, 9:55:43 PM
    Author     : Welcome
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/style.css" type="text/css"/>
        <link rel="stylesheet" href="css/bocuc.css" type="text/css"/>
        <link rel="stylesheet" href="css/testcss.css" type="text/css"/>
        <link rel="stylesheet" href="css/mystyle.css" type="text/css"/>
        <link rel="stylesheet" href="css/botoncss.css" type="text/css"/>
        <title>JSP Page</title>
         <script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>

      
          <script type="text/javascript" >
              
            $(function() {
                $(".inputsearch").keyup(function()
                {
                    var searchid = $(this).val();
                    var dataString = 'search=' + searchid;
                    if (searchid !== '')
                    {
                        $.ajax({
                            type: "POST",
                            url: "searchAjax.jsp",
                            data: dataString,
                            cache: false,
                            success: function(html)
                            {
                                $("#showhint").html(html).show();
                            }
                        });
                    }else{
                         jQuery("#showhint").hide();
                    }
                    return false;
                });

                jQuery("#showhint").live("click", function(e) {
                    var $clicked = $(e.target);
                    var $name = $clicked.find('.name').html();
                    var decoded = $("<div/>").html($name).text();
                    $('#searchid').val(decoded);
                });
                jQuery(document).live("click", function(e) {
                    var $clicked = $(e.target);
                    if (!$clicked.hasClass("inputsearch")) {
                        jQuery("#showhint").fadeOut();
                    }
                });
                $('#searchid').click(function() {
                    jQuery("#showhint").fadeIn();
                });
                
            });
        </script>
        <style type="text/css">
         //body{ 
         //       font-family:Tahoma, Geneva, sans-serif;
         //       font-size:18px;
         //   }
        //    .content{
        //        width:900px;
        //        margin:0 auto;
        //    }
            .name{
                width:446px;
                
                margin-top:-1px !important;
                background-color:transparent !important;
                margin-left:0;}
            #showhint
            {
                position:absolute;
                width:446px;
                padding:10px;
                display:none;
                margin-top:-1px;
                border-top:0px;
                overflow:hidden;
                border:1px #CCC solid;
                background-color: white;
                margin-left: 423px;
            }
            .show
            {
                padding:10px; 
                border-bottom:1px #999 dashed;
                font-size:15px; 
                height:50px;
            }
            .show:hover
            {
                background:#4c66a4;
                color:#FFF;
                cursor:pointer;
            }
            .name:hover
            {
                background:#4c66a4;
                color:#FFF;
                cursor:pointer;
            }
        </style>
        <style>
            .erro {
                    background-color: #FFE7E4;
                    border: 1px solid #F2796B;
                    font-size: 12px;
                    line-height: 25px;
                    margin: 8px auto;
                    padding: 5px 10px;
                    text-align: left;
                    width: 600px;
                }
                a, a:active {
                    color: #476DA4;
                    text-decoration: none;
                }
                .invalid{
                    border: 1px solid #CCD7E6;
                    width: 620px;
                    margin: 0 auto 30px;
                    padding: 8px;
                } 
        </style>
    </head>
    <body>
        <div class="bodypage">
            <!phan dau cua trang>
            <div class="top">
                <%@include file='header.jsp'%>
            </div>
            <!phan search>
            <div class="khoangcachtrang">
                <div class="searchgroup">

                    <%@include file='search.jsp' %> 
                    <div class="chontimkiem">
                        <a href="timkiemnangcao.jsp">Tìm Kiếm Nâng Cao</a>
                    </div>

                </div>
            </div>
            <!phan giua trang >
            <div class="centerpage">

                <div class="leftsite">
                    <div class="menuweb">
                        <%@include file='menuleft.jsp' %>
                    </div>
                </div>

                <div class="content">
                    <div class="invalid">
                    <div style="font-size: 16px;font-weight: bold;font-family: Tahoma,Arial,Verdana,sans-serif;">Đăng Nhập Business Card</div>
                    <div class="erro">
                        <p class="erro-tit" style="font-weight: bold;font-family: Tahoma,Arial,Verdana,sans-serif;">Lỗi đăng nhập</p>
                        <p>Tên đăng nhập / Mật khẩu bạn đã nhập không chính xác! Vui lòng thử lại (đảm bảo đã tắt caps lock).</p>
                        <p>
                        Quên mật khẩu?
                        <a href="http://login.me.zing.vn/login/go?act=forgot">Yêu cầu mật khẩu mới.</a>
                        </p>
                    </div>
                    </div>
                </div>

                <div class="khoangtrang"></div>
            </div>


        </div>
        <!phan cuoi trang>
    <div class="footer">
        <div class="footerleft"></div>
        <div class="footerright"></div>
    </div>
</body>
</html>